<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/comb.css">
    <link rel="stylesheet" href="css/kebi.css">
</head>
<body>
    <h3 id="kebiao">课表</h3>
    <table class="table-custom" border="1">
        <tr style="border: none;" class="jc">
            <th>节次</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td rowspan="2">
                <table border="1">
                <td rowspan="4" style="width: 40%;">上午</td>
                <td style="width: 60%;">
                    <tr><td>第一二节</td></tr>
                    <tr><td>第三四节</td></tr>
                </td>
                </table>
            </td>
            <td class="jz">计算机组成原理3A512</td>
            <td class="jv">Java语言课程设计工A103</td>
            <td class="jv">Java语言课程设计工A103</td>
            <td class="sj">数据库原理与应用3A216</td>
            <td class="ls">离散数学3A216</td>
        </tr>
        <tr>
            <td class="jv">Java语言课程设计工A103</td>
            <td class="we">Web技术基础工A306</td>
            <td class="ls">离散数学3A216</td>
            <td class="we">Web技术基础工A306</td>
            <td class="jv">Java语言课程设计工A103</td>
        </tr>
        <tr>
            <td rowspan="2">
                <table border="1">
                <td rowspan="4" style="width: 50%;">下午</td>
                <td style="width: 50%;">
                    <tr><td>第五六节</td></tr>
                    <tr><td>第七八节</td></tr>
                </td>
                </table>
            </td>
            <td class="sj">数据库原理与应用3A216</td>
            <td class="zg">中国近现代史纲要1B107</td>
            <td></td>
            <td></td>
            <td class="zg">中国近现代史纲要1B107</td>
        </tr>
        <tr>
            <td class="sj">数据库原理与应用3A216</td>
            <td class="zg">中国近现代史纲要1B107</td>
            <td></td>
            <td></td>
            <td class="zg">中国近现代史纲要1B107</td>
        </tr>
    </table>
    <h1 class="show"></h1>
</body>
<script>
    var x=document.querySelectorAll("td");
    var i;
    for(i=0;i<x.length;i++){
        x[i].addEventListener("click",function(){
            var courseInfo= this.textContent;
            var coursecolor=window.getComputedStyle(this).getPropertyValue("background-color");
           showcourseInfo(courseInfo,coursecolor);
        })
    }
    function showcourseInfo(info,color){
         var trimmedInfo=info.slice(0,-5);
         var infocontainer=document.querySelector('.show');
         infocontainer.innerHTML="<u style='color:"+color+";'>"+trimmedInfo+"简介"+"</u>";
    }
</script>
</html>